<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>订单详情</title>
    <link rel="stylesheet" type="text/css" href="./css/webuploader/webuploader.css">
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/all.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/comment.css" />

</head>
<body>
   <div>
       <div class="head">
         <span  onclick="go()">
        <i class="iconfont icon-iconfontjiantou1"></i></span>
           <h1 class="titles">发表评价</h1>
       </div>
       <div class="middles-one">
           <div>
               <textarea class="describe" placeholder="请输入评价内容(最多输入120个字）"></textarea>
           </div>
          <!-- <div  class="picture">
               <img src="img/shangchuan.png" alt="">

           </div>-->
           <!--dom结构部分-->
           <div id="uploader-demo">
               <!--用来存放item-->
               <div id="fileList" class="uploader-list"></div>
               <div id="filePicker"></div>
           </div>
           <div>
               <input type="button" class="submit-one" onclick="addComment()" value="提交"/>
           </div>
       </div>
   </div>
   <script src="js/x_rem.js"></script>
   <script src="js/jquery.min.js"></script>
   <!--引入JS-->
   <script type="text/javascript" src="./js/webuplader/webuploader.js"></script>
   <script src="js/all.js"></script>
   <script src="js/url.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/layer/layer.js"></script>
   <script>
       $(function () {
           // 初始化Web Uploader
           var uploader = WebUploader.create({

               // 选完文件后，是否自动上传。
               auto: true,

               // swf文件路径
               swf: './js/webuplader/Uploader.swf',
               fileNumLimit: 9,//上传数量限制
               //fileSizeLimit:50 * 1024 * 1024, // 50 M ,//限制上传所有文件大小
               fileSingleSizeLimit: 1* 1024 * 1024,//限制上传单个文件大小

               // 文件接收服务端。
               server: 'http://webuploader.duapp.com/server/fileupload.php',

               // 选择文件的按钮。可选。
               // 内部根据当前运行是创建，可能是input元素，也可能是flash.
               pick: '#filePicker',

               // 只允许选择图片文件。
               accept: {
                   title: 'Images',
                   extensions: 'gif,jpg,jpeg,bmp,png',
                   mimeTypes: 'image/*'
               }
           });
           // 当有文件添加进来的时候
           uploader.on( 'fileQueued', function( file ) {
               var $li = $(
                               '<div id="' + file.id + '" class="file-item thumbnail">' +
                               '<img>' +
                               '</div>'
                       ),
                       $img = $li.find('img');
               var $list=$("#uploader-demo");
               // $list为容器jQuery实例
               $list.append( $li );

               // 创建缩略图
               // 如果为非图片文件，可以不用调用此方法。
               // thumbnailWidth x thumbnailHeight 为 100 x 100
               uploader.makeThumb( file, function( error, src ) {
                   if ( error ) {
                       $img.replaceWith('<span>不能预览</span>');
                       return;
                   }

                   $img.attr( 'src', src );
               }, 100,100 );
           });
           // 文件上传过程中创建进度条实时显示。
           uploader.on( 'uploadProgress', function( file, percentage ) {
               var $li = $( '#'+file.id ),
                       $percent = $li.find('.progress span');

               // 避免重复创建
               if ( !$percent.length ) {
                   $percent = $('<p class="progress"><span></span></p>')
                           .appendTo( $li )
                           .find('span');
               }

               $percent.css( 'width', percentage * 100 + '%' );
           });

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
           uploader.on( 'uploadSuccess', function( file ) {
               $( '#'+file.id ).addClass('upload-state-done');
           });

// 文件上传失败，显示上传出错。
           uploader.on( 'uploadError', function( file ) {
               var $li = $( '#'+file.id ),
                       $error = $li.find('div.error');

               // 避免重复创建
               if ( !$error.length ) {
                   $error = $('<div class="error"></div>').appendTo( $li );
               }

               $error.text('上传失败');
           });

// 完成上传完了，成功或者失败，先删除进度条。
           uploader.on( 'uploadComplete', function( file ) {
              // console.log(file);
               $( '#'+file.id ).find('.progress').remove();
           });
           //给图片上传的做出提示
          /* uploader.on('error', function (code, file) {
              // var name=file.name;
               console.log(file);
               var str="";
               switch(code){
                   case "F_DUPLICATE":
                       str=name+"文件重复";
                       alert(str);
                       break;
                   case "Q_TYPE_DENIED":
                       str=name+"文件类型 不允许";
                       alert(str);
                       break;
                   case "F_EXCEED_SIZE":
                       var imageMaxSize = 9;//通过计算
                       str=name+"文件大小超出限制"+imageMaxSize+"M";
                       alert(str);
                       break;
                   case "Q_EXCEED_SIZE_LIMIT":
                       alert("超出空间文件大小");
                       break;
                   case "Q_EXCEED_NUM_LIMIT":
                       alert("抱歉，超过每次上传数量图片限制");
                   default:
                       str=name+" Error:"+code;
                       alert(str);
               }

           });*/
           uploader.on("error", function (type) {
               //console.log(type);
               if (type == "F_EXCEED_SIZE") {
                  alert("文件大小不能超过2M");
               }else {
                   alert("上传出错！请检查后重新上传！错误代码"+type);
               }
           });
       })
       function addComment(){
           var productId = GetQueryString("productId");
           var orderId = GetQueryString("orderId");
           var content= $(".describe").val();
//           var userId=localStorage.getItem("userId");
           var userId=1;
           var token=localStorage.getItem("token");
           $.ajax({
               type : "POST",
               url : "/app/shop/addComment",
               contentType: "application/json;charset=utf-8",
               data : JSON.stringify({
                   "productId":productId,
                   "orderId":orderId,
                   "content":content
               }),// 你的formid
               dataType: "json",
               beforeSend: function (XMLHttpRequest) {
                   XMLHttpRequest.setRequestHeader("token", token);
                   XMLHttpRequest.setRequestHeader("userId", userId);
               },
               error : function(request) {
                   alert("Connection error ");
               },
               success : function(data) {
                   layer.msg(data.message.msg);
               }
           });
       }
   </script>
</body>
</html>